<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
      align="center"
      :gutter="20"
      style="width: 100%; margin-bottom: 10px"
    >
      <el-col
        :span="10"
        style="display: flex"
        ><span style="width: 100px; height: 40px; line-height: 40px"
          >公司名称：</span
        ><el-input v-model="companyName"></el-input
      ></el-col>
      <el-col
        :span="7"
        style="display: flex"
        ><el-button
          type="primary"
          @click="searchHandler"
          >查询</el-button
        ><el-button
          plain
          @click="resetHandler"
          >重置</el-button
        ></el-col
      >
      <el-col
        :span="7"
        style="display: flex"
      ></el-col>
    </el-row>
    <el-row
      type="flex"
      justify="center"
      align="center"
      style="width: 100%; margin-bottom: 10px"
    >
      <el-col
        :span="2"
        style="display: flex"
        ><el-button
          type="primary"
          @click="addHandler"
          >新增</el-button
        ></el-col
      >
      <el-col
        :span="20"
        style="display: flex"
      ></el-col>
      <el-col
        :span="2"
        :pull="1"
        style="display: flex"
      ></el-col>
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="companyName"
          label="公司全称"
          align="center"
        />
        <el-table-column
          prop="companyShortName"
          label="公司简称"
          align="center"
        />
        <el-table-column
          prop="companyCode"
          label="	公司编码"
          align="center"
        />
        <el-table-column
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-dialog
      :title="editTiele"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          style="margin-top: 20px"
          label="公司全称"
          prop="companyName"
        >
          <el-input
            placeholder="公司全称："
            v-model="ruleForm.companyName"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="公司编码:"
          prop="companyCode"
        >
          <el-input
            :disabled="editTiele === '编辑'"
            placeholder="公司编码："
            v-model="ruleForm.companyCode"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="公司简称:"
          prop="companyShortName"
        >
          <el-input
            placeholder="公司全称："
            v-model="ruleForm.companyShortName"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          style="margin-top: 20px"
          label="公司排序"
          prop="companySortNum"
        >
          <el-input
            placeholder="公司全称："
            v-model.number="ruleForm.companySortNum"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCompany,
  saveCompany,
  updateCompany,
  deleteCompany,
} from '/src/http/productSchedule/companyMg.js'
export default {
  data() {
    return {
      dialogVisible: false,
      companyName: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
      isSearch: false,
      ruleForm: {
        companyName: '',
        companyCode: '',
        companyShortName: '',
        companySortNum: '',
      },

      editTiele: '',
      editDialogStatus: false,
      companyId: '',
      rules: {
        companyCode: [
          { required: true, message: '请输入公司编码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' },
        ],
        companyName: [
          { required: true, message: '请输入公司全称', trigger: 'blur' },
        ],
      },
    }
  },

  mounted() {
    this.getCompanyApi()
  },

  methods: {
    searchHandler() {
      this.isSearch = true
      if (this.companyName === '') {
        this.$message({
          message: '请输入查询条件',
          type: 'warning',
        })
      } else {
        this.getCompanyApi(1, this.pageSize, this.companyName)
      }
    },

    resetHandler() {
      this.getCompanyApi()
      this.companyName = ''
      this.isSearch = false
    },

    addHandler() {
      this.editTiele = '新增'
      this.ruleForm.companyShortName = ''
      this.ruleForm.companySortNum = ''
      this.ruleForm.companyCode = ''
      this.ruleForm.companyName = ''
      this.companyId = ''
      this.editDialogStatus = true
    },

    editHandler(v) {
      this.editTiele = '编辑'
      this.ruleForm.companyName = v.companyName
      this.ruleForm.companyCode = v.companyCode
      this.ruleForm.companyShortName = v.companyShortName
      this.ruleForm.companySortNum = v.companySortNum
      this.editDialogStatus = true
      this.companyId = v.id
    },

    deleteHandler(v) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteCompanyApi({ id: v })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      if (this.isSearch === true) {
        this.getCompanyApi(1, v, this.companyName)
      } else {
        this.getCompanyApi(1, v)
      }
    },

    handleCurrentChange(v) {
      this.currentPage = v
      if (this.isSearch === true) {
        this.getCompanyApi(v, this.pageSize, this.companyName)
      } else {
        this.getCompanyApi(v, this.pageSize)
      }
    },

    editSaveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm
          if (this.editTiele == '新增') {
            this.$confirm('确认新增此条信息?', '提示', {
              confirmButtonText: '确定新增',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.saveCompanyApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消新增',
                })
              })
          } else {
            params.id = this.companyId
            this.$confirm('确认编辑此条信息?', '提示', {
              confirmButtonText: '确定编辑',
              cancelButtonText: '取消',
              type: 'info',
            })
              .then(() => {
                this.updateCompanyApi(params)
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消编辑',
                })
              })
          }
          this.editDialogStatus = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    getCompanyApi(pageNum, pageSize, companyName) {
      let params = { pageNum, pageSize, companyName }
      getCompany(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },

    saveCompanyApi(params) {
      saveCompany(params).then((res) => {
        if (res.code == 200) {
          this.getCompanyApi()
          this.$message.success('新增成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },

    updateCompanyApi(params) {
      updateCompany(params).then((res) => {
        if (res.code == 200) {
          this.getCompanyApi(this.currentPage, this.pageSize, this.companyName)
          this.$message.success('编辑成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },

    deleteCompanyApi(params) {
      deleteCompany(params).then((res) => {
        if (res.code == 200) {
          this.getCompanyApi(this.currentPage, this.pageSize, this.companyName)
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-form-item) {
  margin-bottom: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
:deep(.el-input-group__prepend) {
  width: 17% !important;
}
</style>
